<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>群星网约车</title>
	<link rel="icon" href="../image/carMR.png" type="image/png">
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios-0.18.0.js"></script>
    <style>
        /* 样式可以根据需要自行调整 */
        #iframe-container {
            margin-top: 20px;
            height: 500px; /* 设置 iframe 容器的高度 */
            border: 1px solid #ccc;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none; /* 去掉 iframe 的边框 */
        }
		.user-info {
			display: flex;
			align-items: center;
		}

		.avatar {
			margin-right: 10px;
		}

		.username a {
			color: #333;
			text-decoration: none;
		}
    </style>
</head>
<body>
    <div id="app">
        <div class="user-info">
        <!-- 导航链接 -->
            <el-menu :default-active="activeIndex" mode="horizontal" @select="handleMenuSelect">
                <el-menu-item index="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单管理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-menu-item>
                <el-menu-item index="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;问题处理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-menu-item>
                <el-menu-item index="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;司机信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-menu-item>
                <el-menu-item index="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-menu-item>
                <el-menu-item index="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;群星排行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-menu-item>
                <el-menu-item index="6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;报表统计&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-menu-item>
            </el-menu>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<div>
				<el-avatar :src="avatar"></el-avatar>
			</div>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<span class="username"><a id="uname" href="javascript:void(0)">{{ displayUsername }}</a></span>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<el-link target="_blank" :underline="false" @click="exitInfo">退出系统</el-link>
			&nbsp;&nbsp;&nbsp;&nbsp;
		</div>

        <!-- iframe 容器 -->
        <div id="iframe-container">
            <iframe :src="currentUrl"></iframe>
        </div>
    </div>

    <script>
        // request拦截器，将用户token放入头中
        axios.interceptors.request.use(
            config => {
                let token = localStorage.getItem("token"); // 确保 token 正确存储在 localStorage 中
                if (token) {
                    config.headers['token'] = token;
                }
                return config;
            },
            error => {
                console.log(error);
                return Promise.reject(error);
            }
        );
        new Vue({
            el: '#app',
            data: {
                activeIndex: '1', // 默认选中第一个菜单项
                currentPage: 1, // 默认显示第一个页面
                pages: {
                    1: 'orderManagement.html',
                    2: 'customer.html',
                    3: 'driverManagement.html',
                    4: 'userManagement.html',
					5: 'rankings.html',
                    6: 'reports.html'
                },
                userId: "",
                userName: "",
                avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            },
			mounted() {
				this.userId = localStorage.getItem('userId');
				this.userName = localStorage.getItem('userName');
				this.avatar = localStorage.getItem('pic');
/* 				if (this.userName === null) {
					this.$message.error('非法进入,请先登录');
					setTimeout(() => {
						window.location.href = "../html/login.html";
					}, 3000); // 延迟2秒（2000毫秒）执行
				} */
			},
            computed: {
                currentUrl() {
                    // 根据当前选中的页面编号拼接正确的页面 URL
                    return this.pages[this.currentPage];
                },
				displayUsername() {
					// 如果 userName 不为空，显示 userName；否则显示 "未登录"
					return this.userName ? this.userName : "未登录";
				}
            },
            methods: {
                handleMenuSelect(index) {
                    // 根据选择的菜单项设置当前页面的编号
                    this.currentPage = parseInt(index);
                },
				exitInfo(){
					localStorage.removeItem('userId');
					localStorage.removeItem('userName');
					window.location.href = "../html/login.html"; // 页面跳转
				}
            }
        });
    </script>
	<script>
</script>
</body>
</html>
